<!-- 咨询管理页面 -->
<style>
	.user_search-up{
		margin: 6px -50px 0px 600px;
		font-weight: bold;
	}
	.user_search-down{
		margin: 6px -30px 0px 0px;
		font-weight: bold;
	}
	.modal-title{
		font-size: 25px;
		font-weight: bold;
		
	}
	.select-span{
		font-size: 14px;
		font-weight: bold;
		margin-right: 15px;
	}
	.select{
		width: 180px;
		height: 28px;
	}
	tbody{
		overflow: hidden;
	}
	span:hover{
		cursor: pointer;
	}
	
</style>
<div class="user_container">
  <div class="row">
  	<div class="col-md-1">
  		<button class="btn btn-default" type="submit" data-toggle="modal" data-target="#exampleModal">发布资讯</button>
	  </div>
	  <div class="col-md-1 user_search-up">
		标题
	</div>
  	<div class="col-md-2">
  		 <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入标题">
	  </div>
	  <div class="col-md-1 user_search-down">
		所属栏目
	</div>
  	<div class="col-md-2">
  		<select class="form-control user_search_text " >
		       <option class="val table-option" >请输入用户角色</option>
		  </select>
  	</div>
  	
  </div>
  <div class="row">
  	<table class="table table-hover">
	 	<thead>
	 		<th>序号</th>
	 		<th>标题</th>
	 		<th>发布日期</th>
	 		<th>所属栏目</th>
	 		<th>操作</th>
	 	</thead>
	 	<tbody>
	 		<tr>
	 			<!-- <td>1</td>
	 			<td>usernaem</td>
	 			<td>name</td>
	 			<td>role</td>
	 			<td>gender</td>
	 			<td>status</td>
	 			<td>18777772222</td>
	 			<td>
	 			 -->
	 			</td>
	 		</tr>
	 		
	 	</tbody>
	</table>

	<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">发布资讯</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
			<span class="select-span">所属栏目:</span>
            <select class="add-select">
				<option class="val" disabled selected hidden>请输入用户角色</option>
				
			</select>
		  </div>
		  <div class="form-group">
            <label for="recipient-name" class="col-form-label">标题：</label>
            <input type="text" class="form-control modal-input" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">正文：</label>
            <textarea class="form-control modal-input" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

	<script>
		var categoryId=""
		var id=""
		// var id2=1
		var user=""
		//请求用户信息通过分页 并封装
        
		function getData(){
			// console.log(categoryId)
			if(categoryId!="" && categoryId!="请输入用户角色"){
				var url="http://182.92.164.74:8002/article/pageQuery?page=1&pageSize=10&categoryId="+categoryId
			}else{
				var url="http://182.92.164.74:8002/article/pageQuery?page=1&pageSize=10"
			}
			$.ajax({
			url:url,
			type:"GET",
			headers:{
				"Authorization":sessionStorage.getItem("token")
			},
			success:function(data){
				 user=data.data.list;
				$("tbody").empty()
				user.forEach((item,index)=>{

					$("tbody").append(`
					<tr>
							<td>`+(index+1)+`</td>
							<td>`+item.title+`</td>
							<td>`+item.publishTime+`</td>
							<td>`+item.category.name+`</td>
							<td>
								<span>查看</span>
								<span data-toggle="modal" data-target="#exampleModal" class="edit">编辑</span>
								<span class="delete">删除</span>
							</td>
              		</tr>
					`)					
				})				
			}
		})
		}
		getData()
		//请求模态框中所属栏目的数据 并封装
	   function getModalData(){		   
				$.ajax({
					url:"http://182.92.164.74:8002/category/findAll",
					type:"GET",
					headers:{
					"Authorization":sessionStorage.getItem("token")
					},
					success:function(data){					
						var user=data.data
						user.forEach(function(item){
							$(".val").after(`<option value=`+item.id+`>`+item.name+`</option>`)						
						})									
					}
				})			
	   }	   
	   getModalData()		
		//给保存按钮绑定事件		
		$(".btn-primary").click((event)=>{
			//获取模态框中的数据,并放到一个对象中，因为post请求参数要在请求体中			
				if(id==""){
					var obj={
						categoryId:$(".add-select").val(),
						title:$("#recipient-name").val(),
						content:$("#message-text").val(),
					}
				}else{
					var obj={
						id:id,
						categoryId:$(".add-select").val(),
						title:$("#recipient-name").val(),
						content:$("#message-text").val(),
					}
				}	
				// console.log(obj)		
			// //发送请求添加数据
			$.ajax({
			url:"http://182.92.164.74:8002/article/saveOrUpdate",
			type:"POST",
			headers:{
				"Authorization":sessionStorage.getItem("token")
			},
			data:obj,
			success:function(data){
					//关闭模态框 刷新页面
					alert(data.message)
					$("#exampleModal").modal("hide")
					// console.log(1)
					$("tbody").empty()
					getData()     
			}
			})   
		})
//给发布咨询按钮绑定事件
$(".btn-default").click(()=>{
   $(".modal-input").val("")  
   $(".add-select").val("请输入用户角色")
 })

//给编辑按钮绑定事件
$("tbody").on("click",".edit",(event)=>{
   //获取当前行数据       
  var title=$(event.currentTarget).parents("tr").children().eq(1).text()
   var category=$(event.currentTarget).parents("tr").children().eq(3).text()
   user.forEach((item)=>{
	   if(item.title==title){
		   id=item.id;
		   categoryId=item.category.id;
		   content=item.content
	   }
   })
//    console.log(title,category,categoryId,id,content)
   //将数据放到模态框中
   $("#exampleModal input").val(title)
   $("#exampleModal textarea").val(content)
   $(".add-select").val(categoryId)
})
//给删除按钮绑定事件
$("tbody").on("click",".delete",(event)=>{	
    //获取当前行的id
	var title=$(event.currentTarget).parents("tr").children().eq(1).text()
	user.forEach((item)=>{
	   if(item.title==title){
		   id=item.id;
	   }
   })
	//请求数据删除数据
	$.ajax({
				url:"http://182.92.164.74:8002/article/deleteById?id="+id,
				type:"get",
				headers:{
					"Authorization":sessionStorage.getItem("token")
				},
				success:function(data){
					alert("删除成功")
					$("tbody").empty();
					getData()
				}
			})
})
//给搜索栏目绑定事件
	
	$(".user_search_text").click((event)=>{
		//获取栏目信息		
		categoryId=$(event.target).val()
		// console.log(categoryId)

         getData()
	})


</script>